<template>
  <div class="">
    <!-- u图片 -->

    <div :style="{ display: 'flex', margin: '10px' }">
      <a-card :style="{ width: '1300px' }" title="部位名称">
        <template #extra>
          <!-- <a-link>More</a-link> -->
        </template>
        <div class="bwbox">
          <div class="bwitem">
            <div class="bwitemimg"> </div>
            <div class="bwitemdesbox">
              <div class="bwitemtitle">部位名称</div>
              <div class="bwitemdes">部位描述</div>
            </div>
          </div>
          <div class="bwitem">
            <div class="bwitemimg"> </div>
            <div class="bwitemdesbox">
              <div class="bwitemtitle">部位名称</div>
              <div class="bwitemdes">部位描述</div>
            </div>
          </div>
          <div class="bwitem">
            <div class="bwitemimg"> </div>
            <div class="bwitemdesbox">
              <div class="bwitemtitle">部位名称</div>
              <div class="bwitemdes">部位描述</div>
            </div>
          </div>
          <div class="bwitem">
            <div class="bwitemimg"> </div>
            <div class="bwitemdesbox">
              <div class="bwitemtitle">部位名称</div>
              <div class="bwitemdes">部位描述</div>
            </div>
          </div>
          <div class="bwitem">
            <div class="bwitemimg"> </div>
            <div class="bwitemdesbox">
              <div class="bwitemtitle">部位名称</div>
              <div class="bwitemdes">部位描述</div>
            </div>
          </div>
          <div class="bwitem">
            <div class="bwitemimg"> </div>
            <div class="bwitemdesbox">
              <div class="bwitemtitle">部位名称</div>
              <div class="bwitemdes">部位描述</div>
            </div>
          </div>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script lang="ts" setup></script>

<style>
  .bwbox {
    display: flex;
    flex-wrap: wrap; /* 允许换行 */
    gap: 10px; /* 添加元素间的间距 */
    width: 100%; /* 设置宽度为100% */
    height: 100%;
    box-sizing: border-box; /* 包含 padding 和 border 在内 */
  }

  .bwitem {
    flex: 0 0 400px; /* 固定宽度为400px */
    height: 200px;

    box-sizing: border-box; /* 确保 padding 和 border 在内 */
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
  }

  /* 在容器的 .bwbox 上应用水平对齐 */
  .bwbox {
    justify-content: flex-start; /* 从左边开始对齐 */
  }
  .bwitemimg {
    width: 180px;
    height: 180px;
    background: rgba(0, 255, 221, 0.637);
  }
  .bwitemdesbox {
    display: flex;
    flex-direction: column;
    margin-left: 15px;
    justify-content: center;
    align-content: center;
  }
  .bwitemtitle {
    font-size: 20px;
  }
  .bwitemdes {
    margin: 10px 0;
    font-size: 16px;
  }
</style>
